<script setup lang="ts">
import ProgressBar from 'progressbar.js'
import { onMounted, watch } from 'vue'
import type Circle from 'progressbar.js/circle'

const props = defineProps({
  progress: { type: Number, default: 0 }
})

let circleProgress: Circle | null

onMounted(() => {
  circleProgress = new ProgressBar.Circle('.drawing-circle-progress', {
    strokeWidth: 10,
    color: '#000000',
    easing: 'easeInOut',
    svgStyle: {
      'stroke-linecap': 'round'
    }
  })
  updateProgress(props.progress)
  watch(() => props.progress, updateProgress)
})

/**
 * 更新进度值
 * @param value
 */
function updateProgress(value: number) {
  let progress = Math.min(Math.max(0, value), 1)
  circleProgress?.animate(progress)
  circleProgress?.setText(Math.floor(progress * 100).toString())
}
</script>

<template>
  <div class="drawing-circle-progress"></div>
</template>

<style scoped>

.drawing-circle-progress {
  --progress-size: 130px;

  width: var(--progress-size);
  height: var(--progress-size);
  background: var(--color-primary);
  border-radius: var(--progress-size);
  text-align: center;
  color: black;
  font-weight: bold;
  font-size: 2rem;
  line-height: var(--progress-size);
  padding: 5px;
}
</style>